<template>
  <el-dialog
    title="修改密码"
    append-to-body
    :visible.sync="visible"
    :before-close="close"
    :close-on-click-modal="false"
    width="50%">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-position="top">
    	<el-form-item prop="oldPassword" label="原始密码">
        <el-input type="password" v-model="dataForm.oldPassword" placeholder="原始密码" show-password/>
      </el-form-item>

      <el-form-item prop="newPassword" label="新密码">
        <el-input type="password" v-model="dataForm.newPassword" placeholder="新密码" show-password/>
      </el-form-item>

      <el-form-item prop="againPassword" label="再次输入新密码">
        <el-input type="password" v-model="dataForm.againPassword" placeholder="再次输入新密码" show-password/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" class="pan-btn primary-btn" :loading="submiting" @click="submit('dataForm')">确 定</el-button>
  	</span>
  </el-dialog>
</template>

<script>
  import {mapMutations} from 'vuex'
  import {removeCookie} from '@/common/js/utils'
  import {URL, CODE_OK, TOKEN_KEY} from '@/common/js/config'
  import {changePassword,logout} from '@/api/user'
  export default {
    data() {
      return {
        visible: false,
        submiting: false,
        dataForm: {},
        dataRule: {
        	oldPassword: [
          	{ min: 6, required: true, message: '请输入不少于6个字符的原始密码', trigger: 'blur' }
        	],
          newPassword: [
          	{ min: 6, required: true, message: '请输入不少于6个字符的新密码', trigger: 'blur' }
          ],
          againPassword: [
          	{ min: 6, required: true, message: '请输入不少于6个字符的新密码', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.visible = true
    },
    methods: {
      close() {
        this.visible = false
        this.$emit('close')
      },
      submit(form) {
        if (this.dataForm.newPassword !== this.dataForm.againPassword) {
          this.$message.error('两次输入密码不一致')
          return
        }
        this.submiting = true
        this.$refs[form].validate(valid => {
          if (valid) {
            const data = {
              oldPassword: this.dataForm.oldPassword,
              newPassword: this.dataForm.newPassword
            }
            changePassword(data).then(res => {
              if (res.code === CODE_OK) {
                this.$message({
                  message: "修改成功，重新登录",
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    logout().then(res => {
                      if (res.code === CODE_OK) {
                        this.updateToken('')
                        removeCookie(TOKEN_KEY)
                        this.$router.push({name:"login"})
                      }else{
                        this.$message.error(res.msg)
                      }
                    })
                  }
                })
              } else {
                this.submiting = false
                this.$message.error(res.msg)
              }
            })
          } else {
            this.submiting = false
            return false
          }
        })
		  },
      ...mapMutations([
      	'updateToken'
      ])
    }
  }
</script>

<style>
</style>
